<template>
  <up-popup :show="show" :round="12" mode="bottom" closeOnClickOverlay :safeAreaInsetBottom="false" @close="close">
    <view class="content">
      <view class="top-btn">
        <text class="top-btn-cancel" @click="close">取消</text>
				<text class="top-btn-title">请选择年检车辆</text>
        <text class="top-btn-confirm" @click="handleConfirm">确定</text>
      </view>
      <view class="main">
        <ycy-car-card direction="vertical" :searchParam="searchParam" :showAdd="false" showRadio @onChoose="handleChoose" />
      </view>
    </view>
  </up-popup>
</template>

<script setup>
  import { ref } from 'vue';
	
	const emits = defineEmits(['onConfirm'])
  const show = ref(false);
	const currentCar = ref({})
  const searchParam = {
    checkStatus: 0
  };

  const open = () => {
    show.value = true;
  };

  const close = () => {
    show.value = false;
  };
	
	const handleChoose = item => {
		currentCar.value = item;
	}

  const handleConfirm = () => {
		emits('onConfirm', currentCar.value)
	};

  defineExpose({ open, close });
</script>

<style lang="scss">
    .content {
      padding: 12px;
      padding-bottom: 18px;

      .top-btn {
        font-size: 16px;
        @include flex-row(space-between);
        padding-bottom: 12px;
        &-cancel {
          color: $uni-text-color-deep-grey;
        }
				&-title {
					color: $uni-text-color;
					font-weight: bold;
				}
        &-confirm {
          color: $uni-color-primary;
        }
      }

      .main {
      }
    }
</style>
